import React, { useState } from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { Input } from './input'
const ControlledInput = () => {
  const [value, setValue] = useState<string>()
  return (
    <Input
      value={value}
      defaultValue={value}
      onChange={e => {
        setValue(e.target.value)
      }}
    />
  )
}
const defaultInput = () => (
  <div>
    <Input
      style={{ width: '300px' }}
      placeholder="placeholder"
      onChange={action('changed')}
    />
    <ControlledInput />
  </div>
)
const disabledInput = () => (
  <Input style={{ width: '300px' }} placeholder="disabled input" disabled />
)

const iconInput = () => <Input placeholder="input with icon" icon="search" />

const sizeInput = () => (
  <div>
    <Input style={{ width: '300px' }} defaultValue="large size" size="large" />
    <Input style={{ width: '300px' }} placeholder="small size" size="small" />
  </div>
)

const pendInput = () => (
  <div>
    <Input
      style={{ width: '300px' }}
      defaultValue="prepend text"
      prepend="https://"
    />
    <Input style={{ width: '300px' }} defaultValue="google" append=".com" />
  </div>
)

storiesOf('Input component', module)
  .add('Default Input', defaultInput)
  .add('Disabled Input', disabledInput)
  .add('Icon Input', iconInput)
  .add('Different Input', sizeInput)
  .add('Prefixes and Suffixes Input', pendInput)
